<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Section Form</title>
<link href="./trac.css" media="screen" rel="stylesheet" type="text/css">
<script type="text/javascript" src="./script/lib/jquery.min.js"></script>
<script type="text/javascript" src="./script/lib/jquery-ui.min.js"></script>
<style type="text/css">
html,body {
	margin: 0;
	padding: 0;
}

form {
	background-color: #F8F8F8;
	border: 1px solid #ddd;
	color: #000;
	display: inline-block;
	margin: 2em;
	padding: 1em;
}

form h1 {
	background: #F6F6F6;
	border: 1px solid #F1F1F1;
	border-left: .25em solid #F1F1F1;
	padding: .25em;
	margin-bottom: .5em;
}

fieldset {
	line-height: 1em;
	position: relative;
	padding: .5em;
	text-align: right;
	width: 420px;
}

label {
	color: #333;
	font-size: 0.9099em;
	font-weight: bold;
	height: 1.236em;
	left: 0;
	line-height: 1.236em;
	position: absolute;
	text-align: right;
	vertical-align: middle;
	width: 180px;
}

label:hover {
	color: #000;
}

input {
	font-size: 0.9099em;
}

input[type="text"] {
	height: 1.236em;
	width: 15em;
}

input[type="submit"],input[type="reset"] {
	cursor: pointer;
	background: #F8F8F8;
	border: 1px solid #ccc;
	border-radius: 2px;
	-moz-border-radius: 2px;
	-webkit-border-radius: 2px;
	-moz-box-shadow: 0px 1px 1px #eee;
	-webkit-box-shadow: 0px 1px 1px #eee;
	box-shadow: 0px 1px 1px #eee;
	color: #333;
	outline: none;
	padding: .5em 1em;
	text-decoration: none;
	margin-left: 1em;
}

input[type="submit"]:focus,input[type="submit"]:hover,input[type="reset"]:focus,input[type="reset"]:hover
	{
	background: #FBFBFB;
	border-color: #bbb;
	border-bottom-color: #999;
	-moz-box-shadow: 0px 1px 1px #ddd, inset 0px 0px 1px #ddd;
	-webkit-box-shadow: 0px 1px 1px #ddd, inset 0px 0px 1px #ddd;
	box-shadow: 0px 1px 1px #ddd, inset 0px 0px 1px #ddd;
	color: #000;
}

select {
	margin: 0;
}

.select-wrapper {
	text-align: left;
	margin-left: 200px;
}
</style>
</head>
<body id="trac">
    <header class="document-header">
        <hgroup>
            <h1>Project Tracker</h1>
            <h2>Minding your matters.</h2>
        </hgroup>
    </header>
    <form action="/trac" method="post">
        <h1>Section Form</h1>
        <fieldset>
            <label for="name">Draft Candidate Section</label><input type="text"
                id="name" name="name">
        </fieldset>
        <fieldset>
            <label for="status">Status</label>
            <div class="select-wrapper">
                <select id="status" name="status">
                    <optgroup label="">
                        <option value="0">Inactive</option>
                        <option value="1">Active</option>
                    </optgroup>
                </select>
            </div>
        </fieldset>
        <fieldset>
            <label for="owner">Owner</label><input type="text" id="owner"
                name="owner">
        </fieldset>
        <fieldset>
            <label for="qa">Quality Assurance (QA)</label><input type="text"
                id="qa" name="qa">
        </fieldset>
        <fieldset>
            <label for="due">Expected Completion</label><input type="text"
                id="due" name="due">
        </fieldset>
        <fieldset>
            <label for="text_notes_1">Notes</label><input type="text"
                id="text_notes_1" name="text_notes">
        </fieldset>
        <fieldset>
            <input type="submit" value="create"><input type="reset"
                value="reset">
        </fieldset>
    </form>
</body>
</html>